<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<div class="modal-dialog ms-modal-dialog" style="margin-top:50px;" >
  <div class="modal-content">
     
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      <h4 class="modal-title">添加新课程</h4>
    </div>
    
      <form class="form-horizontal ms-form form-personal-info" method="POST" action="${ctx.host}/project-data/${projectPhase.id}/course-create" data-validate="true">
        <input type="hidden" name="projectPhaseId" value="${projectPhase.id}" />
        <input type="hidden" name="currentPhase" value="${projectPhase.phase}" />
        <input type="hidden" name="property" value="自定义课程" />
        
         <div class="modal-body">
             
            <div class="form-group  ms-form-group">
              <label class="control-label col-xs-3"><span class="text-red">*</span>课程来源：</label>
              <div class="col-xs-8">
                <select class="select2 form-control" name="category" data-validate="required" tabindex="7">
                  <option></option>
                  <option value="STAND" selected>内部课程</option>
                  <option value="OUTSIDE">外部课程</option>
                </select>
              </div>
            </div>
             
            <div class="form-group  ms-form-group">
	          <label class="control-label col-xs-3"><span class="text-red">*</span>课程名称：</label>
	          <div class="col-xs-8">
	            <input type="text" class="form-control" name="name" value="" placeholder="名称" data-validate="required" autocomplete="off" tabindex="1"/>
	          </div>
	        </div>
          
          
          <div class="form-group  ms-form-group">
            <label class="control-label col-xs-3"><span class="text-red">*</span>课程类型：</label>
            <div class="col-xs-8">
          <select class="select2 form-control" name="type" data-validate="required" tabindex="7">
              <option></option>
                    <option value="管理类">管理类</option>
                    <option value="专业通识类">专业通识类</option>
                </select>           
            </div>
          </div>
	        
	        <div class="form-group  ms-form-group">
	          <label class="control-label col-xs-3"><span class="text-red">*</span>课程时长：</label>
	          <div class="col-xs-8">
	            <input type="text" class="form-control" name="hour" value="" placeholder="课程时长" data-validate="required|float|length_between,1,4" autocomplete="off" tabindex="2"/>
	          </div>
	        </div>
	        
            <div class="form-group  ms-form-group">
	          <label class="control-label col-xs-3"><span class="text-red">*</span>课程目标：</label>
	          <div class="col-xs-8">
	          	<textarea name="target"   cols="45"   rows="4"   style="OVERFLOW:   hidden"></textarea>
	            <!--<input type="text" class="form-control" name="target" value="" placeholder="课程目标" data-validate="required" autocomplete="off" tabindex="3"/>-->
	          </div>
	        </div>
	        
            <div class="form-group  ms-form-group">
	          <label class="control-label col-xs-3"><span class="text-red">*</span>课程介绍：</label>
	          <div class="col-xs-8">
	          	<textarea name="description"   cols="45"   rows="4"   style="OVERFLOW:   hidden"></textarea>
	            <!--<input type="text" class="form-control" name="description" value="" placeholder="课程介绍" data-validate="required" autocomplete="off" tabindex="3"/>-->
	          </div>
	        </div>
	        
	         <div class="form-group  ms-form-group">
	          <label class="control-label col-xs-3"><span class="text-red">*</span>讲师：</label>
	          <div class="col-xs-8">
					<input class="select2 form-control" name="trainerId" id="trainerId" data-validate="required" tabindex="7">
	          </div>
	        </div>
          
          <div class="form-group  ms-form-group hide">
            <label class="control-label col-xs-3"><span class="text-red">*</span>讲师：</label>
            <div class="col-xs-8">
          <input class="form-control" name="trainerName" placeholder="请输入外部课程讲师名称" data-validate="" tabindex="7">
            </div>
          </div>
          
          <div class="form-group  ms-form-group hide">
            <label class="control-label col-xs-3"><span class="text-red">*</span>供应商名称：</label>
            <div class="col-xs-8">
          <input class="select2 form-control" placeholder="请输入外部课供应商称" name="supplierName" data-validate="" tabindex="7">
            </div>
          </div>
          
          <div class="form-group  ms-form-group hide">
            <label class="control-label col-xs-3">讲师简介：</label>
            <div class="col-xs-8">
              <textarea class="form-control" cols="45" placeholder="请输入外部课程讲师简介"   rows="4" style="OVERFLOW:   hidden" name="trainerDesc" tabindex="7"></textarea>
            </div>
          </div>
	       
        
        </div>
      <div class="modal-footer ms-modal-footer">
        <button type="submit" class="btn btn-shadow-success btn-shadow umu-btn" >确定</button>
        <button type="button" class="btn btn-shadow-default btn-shadow umu-btn" data-dismiss="modal">取消</button>
      </div>

      </form>
    
  </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
      $('select[name="type"]').select2({
        placeholder : '请选择课程类型',
        minimumResultsForSearch : 1,
        allowClear : true,
      });
      
      $('select[name="category"]').select2({
        placeholder : '请选择课程来源',
        minimumResultsForSearch : 1,
        allowClear : true,
      }).on("change", function(e) {
        var val = $(this).val();
        debugger
        if(val==='OUTSIDE') {
          $("input[name='trainerId']").data("validate", "");
          $("input[name='trainerId']").parents(".form-group").addClass("hide");
          
          $("input[name='trainerName']").data("validate", "required");
          $("input[name='trainerName']").parents(".form-group").removeClass("hide");
          
          $("input[name='supplierName']").data("validate", "required");
          $("input[name='supplierName']").parents(".form-group").removeClass("hide");
          
        } else {
          $("input[name='trainerId']").data("validate", "required");
          $("input[name='trainerId']").parents(".form-group").removeClass("hide");
          
          $("input[name='trainerName']").data("validate", "");
          $("input[name='trainerName']").parents(".form-group").addClass("hide");
          
          $("input[name='supplierName']").data("validate", "");
          $("input[name='supplierName']").parents(".form-group").addClass("hide");
        }
        
        $("form").find('input[data-validate],select[data-validate],textarea[data-validate]').unbind("blur");
        $("form").bt_validate();
      });
      
      $('#trainerId').select2({
         placeholder : '请选择讲师',
         minimumResultsForSearch : 1,
         minimumInputLength: 2,
         allowClear : true,
         ajax: {
             type:'GET',
             url: function(params){      
            	 console.log(params)
                 return window.__CTX__.root + '/trainers/select-search?query='+ params
             },
             dataType: 'json',
             delay: 1500,
             results: function (response, page, i) {
               console.log(page)
               console.log(i)
               if(response.code == '0' || response.code == 0) {
            	   return {results: response.data.trainers}
               } else {
            	   return null;
               }
             },
             cache: true
         }
      
       }); 
 })
</script>
